<template>
  <div class="strut-div">
    <div class="card-item" style="height:285px;">
      <p class="card-title">近一年销售环比走势图</p>
      <div class="card-div">
        <common-mix-chart ref="salesRatioLine" :config="salesRatioLineConfig"></common-mix-chart>
      </div>
    </div>
    <div class="card-item" style="height:330px;margin-top:20px;">
      <p class="card-title">企业历年认证数量</p>
      <div class="card-div">
        <common-mix-chart ref="companyMixChart" :config="companyMixConfig"></common-mix-chart>
      </div>
    </div>
    <div class="card-item" style="height:336px;margin-top:20px;">
      <p class="card-title">各地市三品认证及产品种类</p>
      <div class="card-div">
        <p class="info-record-top">
          <i class="non-negative-bg"></i>
          <span> 产品数量 </span>
          <i class="sensitive-bg"></i>
          <span>农产品种类</span>
        </p>
         <el-row>
          <el-col style="width: 20%;text-align: center;">城市名称</el-col>
          <el-col style="width: 20%;text-align: center;">无公害产品</el-col>
          <el-col style="width: 20%;text-align: center;">绿色产品</el-col>
          <el-col style="width: 20%;text-align: center;">有机产品</el-col>
          <el-col style="width: 20%;text-align: center;">地理标识</el-col>
        </el-row>
        <div id="products-list" style="height:200px;overflow:hidden;">
          <div class="scroll-container">
          <el-row v-for="(item,index) in productList" :key="index">
            <el-col class="info-record-t info-record-th" style="width: 20%;">
              {{item.commonRegion.name}}
            </el-col>
            <el-col style="width: 20%;">
              <div>
                <p class="info-record-t non-negative">{{item.wghCount}}</p>
                <p class="info-record-t sensitive">{{item.wghTypeCount}}</p>
              </div>
            </el-col>
            <el-col style="width: 20%;">
              <div>
                <p class="info-record-t non-negative">{{item.greenCount}}</p>
                <p class="info-record-t sensitive">{{item.greenTypeCount}}</p>
              </div>
            </el-col>
            <el-col style="width: 20%;">
              <div>
                <p class="info-record-t non-negative">{{item.organicCount}}</p>
                <p class="info-record-t sensitive">{{item.organicTypeCount}}</p>
              </div>
            </el-col>
            <el-col style="width: 20%;">
              <div>
                <p class="info-record-t non-negative">{{item.landmarkCount}}</p>
                <p class="info-record-t sensitive">{{item.landmarkTypeCount}}</p>
              </div>
            </el-col>
          </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CommonMixChart from "@/components/common/common-mix-chart.vue";

  import autoScroll from '@/util/autoScroll.js';

  export default {
    name: 'sxFamousRight',
    components: {
      CommonMixChart
    },
    data() {
      return {
        productList:[],
        salesRatioLineConfig: {
          option: {
            legend: {
              data: ['销售额','增长率'],
              textStyle: {
                fontSize: 14
              }
            },
            id: 'agriMixLine',
            xAxis: ['19年07月', '19年08月', '19年09月', '19年10月', '19年11月', '19年12月', '20年01月', '20年02月', '20年03月', '20年04月', '20年05月', '20年06月'],
            xMaxLength:3,
            yAxis: [{
                type: 'value',
                min: 0,
                max: null,
                name: '销售额（亿元）',
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                min: null,
                max: null,
                name: '增长率',
                axisLabel: {
                  formatter: '{value}%'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '销售额',
                type: 'bar',
                data: [3.88, 3.76, 2.97, 3.73, 3.83, 4.02, 1.74, 1.83, 1.96, 0, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00FFED' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00AEFF' // 100% 处的颜色
                  }],
                },
                label:{
                    show:true,
                    position:'top',
                    formatter:'{c}',
                    color:"#00FFED",
                    fontSize:14
                },
                barWidth: 22, //柱图宽度
              },
              {
                name: '增长率',
                type: 'line',
                yAxisIndex: 1,
                data: [5.67, -3.15, -21.06, 25.8, 2.72, 4.74, -56.68, 5.4, 6.87, -100, 0, 0],
                itemStyle: {
                  color: '#F6FF00'
                },
                label:{
                    show:true,
                    position:'top',
                    formatter:'{c}%',
                    color:"#00FFED",
                    fontSize:14
                },
              }
            ]
          }
        },
        companyMixConfig: {
          option: {
            legend: {
              data: ['增长量','累计数'],
              textStyle: {
                fontSize: 14
              }
            },
            id: 'companyMix',
            xAxis: [],
            yAxis: [{
                type: 'value',
                min: 0,
                max: null,
                name: '数量',
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                min: null,
                max: null,
                name: '累计数',
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '增长量',
                type: 'bar',
                data: [],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00FFED' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00AEFF' // 100% 处的颜色
                  }],
                },
                label:{
                    show:true,
                    position:'top',
                    formatter:'{c}',
                    color:"#00FFED",
                    fontSize:14
                },
                barWidth: 22, //柱图宽度
              },
              {
                name: '累计数',
                type: 'line',
                yAxisIndex: 1,
                data: [],
                itemStyle: {
                  color: '#F6FF00'
                },
                label:{
                    show:true,
                    position:'bottom',
                    formatter:'{c}',
                    color:"#fff",
                    fontSize:14
                },
              }
            ]
          }
        }
      }
    },
    mounted() {
        this.$refs.salesRatioLine.initChart();
        this.getCompanyMixdata();
        this.getProdNumAndType();
    },
    methods:{
        getCompanyMixdata() {
            this.$axios.get('../../../../static/geoAndCompanyData.json').then(res => {
                let data = res.data.everyYearSatistical['山西省'];
                this.companyMixConfig.option.xAxis = data.map(item => {
                    return item.yearStr;
                });

                this.companyMixConfig.option.series[0].data = data.map(item => {
                    return item.count;
                });

                this.companyMixConfig.option.series[1].data = data.map(item => {
                    return item.incremental;
                });

                this.$refs.companyMixChart.initChart();
            });
        },
        getProdNumAndType() {
          this.$axios.get('../../../../static/prodNumberAndType.json').then(res => {
            let data = res.data.childUnits;
            this.productList = data;

            this.$nextTick(function() {
              autoScroll.autoScrollList('products-list')
            })
          })
        }
    }
  }

</script>
<style lang="scss" scoped>
  .info-record-top {
    text-align: right;
    font-size: 16px;
    padding: 10px;
    >i {
      display: inline-block;
      vertical-align: middle;
      width:36px;
      height:16px;
      margin-left:20px;
    }
    >span {
      vertical-align: middle;
      display:inline-block;
      margin-left:5px;
    }
  }

  .non-negative-bg {
    background-color: #6C43F7;
  }

  .sensitive-bg {
     background-color: #EDA652;
  }

  .info-record-t {
    height: 25px;
    line-height: 25px;
    text-align: center;
    box-sizing: border-box;
  }

  .info-record-th {
     height: 50px;
    line-height: 50px;
    background-color: rgba(62, 162, 254, 0.2);
    border-bottom: 1px solid #34d4f3;
  }
  .non-negative {
    color: #6C43F7;
    // border-bottom: 1px solid #34d4f3;
  }
  .sensitive {
    color: #EDA652;
    border-bottom: 1px solid #34d4f3;
  }
</style>
